@extends('layouts.app')

@section('content')
    <form class="topic" action="{{route('topics.save')}}" method="post">
        <input type="hidden" name="id" value="{{$id}}" />
        <input type="hidden" name="city_id" value="{{$city_id ?? null}}" />
        {{csrf_field()}}
        <div class="container">
            <div class="card">
                <div class="card-header text-center">
                    <h1>
                        {{isset($id)?'修改话题':'发布信息'}}
                    </h1>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <input type="title" name="title" value="{{$topic->title ?? ''}}" class="form-control" placeholder="请填写标题">
                        <template v-if="errors.title">
                            <span class="text-danger" >@{{ errors.title[0] }}</span>
                        </template>

                    </div>
                    <div class="form-group">
                        <select class="form-control" name="category_id">
                            <option disabled value="">请选择分类</option>
                            @foreach(\App\Models\Category::all() as $v)
                                @if(isset($id))
                                    <option value="{{$v->id}}" {{$v->id == $topic->category->id?'selected':''}}>{{$v->name}}</option>
                                @else
                                    <option value="{{$v->id}}" {{isset($category_id) ? $v->id == $category_id?'selected':'':''}}>{{$v->name}}</option>
                                @endif
                            @endforeach
                        </select>
                        {{--<span class="text-danger" >{{$errors->first('category_id')}}</span>--}}
                        <template v-if="errors.category_id">
                            <span class="text-danger" >@{{ errors.category_id[0] }}</span>
                        </template>
                    </div>
                    <div class="alert alert-info">
                        <strong>提示：</strong> 选择区域是为了让信息更容易被检索到，可以不填。
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="county_id" id="county" @change="selectCounty">
                            <option value="">请选择行政区</option>
                            @foreach($county_info as $v)
                                <option data-id="{{$v->id ?? ''}}" value="{{$v->id ?? ''}}" {{isset($topic) ? $v->id == $topic->county_id ? 'selected':'':''}}>{{$v->name ?? ''}}</option>
                            @endforeach
                        </select>
                    </div>
                    <template v-if="communities.length > 0">
                        <div class="form-group">
                            <select class="form-control" name="community_id" v-model="community_id">
                                <option value="">请选择社区</option>
                                <option v-for="option in communities" :value="option.id">@{{ option.name }}</option>
                            </select>
                        </div>
                    </template>

                    <div class="form-group">
                        <textarea style="display: none;" id="body" class="form-control" name="body"></textarea>
                        <div id="toolbar-container"></div>
                        <div id="editor" style="border: solid 1px grey;min-height: 120px;">
                            {!! $topic->body ?? '' !!}
                        </div>
                        <template v-if="errors.body">
                            <span class="text-danger" >@{{ errors.body[0] }}</span>
                        </template>

                    </div>
                </div>
                @if(isset($global_city))
                    <input type="hidden" name="city_id" value="{{$global_city->id or ''}}"/>
                @endif
                <div class="card-footer">
                    <button type="button" class="btn btn-primary" @click="submit">保存</button>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('scripts')
    <script src="{{asset('plugins/ckeditor5-build-decoupled-document/ckeditor.js')}}"></script>
    <script src="{{asset('js/editor/FileUploadAdapter.js')}}"></script>
    <script>
        new Vue({
            el:'#app',
            mounted() {
                this.createEditor();
                this.selectCounty();
            },
            data() {
                return {
                    community_id:'{{$topic->community_id or null}}',
                    communities:[],
                    errors:[]
                }
            },
            methods:{
                selectCounty(){
                    var countyId = $('#county').find('option:selected').attr('data-id');
                    if(countyId) {
                        axios.post('{{route('communities.get_by_county_id')}}',{county_id:countyId}).then((response) => {
                            if (response.status) {
                                this.communities = response.data;
                            }
                        }).catch((error) => {

                        });
                    }
                },
                submit() {
                    $('.card-footer button').attr('disabled',true);
                    $('#body').text(editor.getData());
                    //$('form.topic').submit();
                    axios.post('{{route('topics.save')}}',$('form.topic').serialize()).then((response) => {
                        if (response.data.status) {
                            window.location = '/topics/' + response.data.cat_id+'/' + response.data.id;
                        }
                    }).catch((error) => {
                        var response = error.response;
                        if (response.status == 422) {
                            this.errors = response.data.errors;
                        }
                        $('.card-footer button').attr('disabled',false);
                    });
                },
                createEditor() {
                    DecoupledEditor
                        .create( document.querySelector( '#editor' ) )
                        .then( editor => {
                            const toolbarContainer = document.querySelector( '#toolbar-container' );
                            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
                            //editor.data.processor = new GFMDataProcessor();
                            window.editor = editor;
                            editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
                                return new FileUploadAdapter(loader);
                            };
                        } )
                        .catch( error => {
                            console.error( error );
                        } );
                }
            }
        });
    </script>
@endsection